<template>
	<div class="common-layout">
		<el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div v-if="flag==1">
				<div>
					<div class="top">
						<h3>商品列表</h3>
						<el-button plain @click="addGoodsFn" type="primary" v-if='counter.btnsObj.addFlag'>
							{{counter.btnsObj.addName}}
						</el-button>
					</div>
					<div class="item1">
						<el-form-item label="商品串号" label-width="90">
							<el-input v-model="form.priceCode" clearable style="width: 200px;" placeholder="请输入商品码" />
						</el-form-item>
						<el-form-item label="商品名称" label-width="90">
							<el-input v-model="form.goodsName"  clearable style="width: 200px;" placeholder="请输入商品名称" />
						</el-form-item>
						<el-form-item label="商品分类" label-width="90">
							<el-tree-select
							    v-model="form.separateId"
							    :data="options"
							    :render-after-expand="false"
								placeholder="请选择商品分类"
								check-strictly
								show-checkbox
							    style="width: 200px"
							  />
						</el-form-item>
						<el-form-item label="商品类型" label-width="90">
							<el-select v-model="form.goodsVirtual" style="width: 200px"  clearable placeholder="请选择">
								<el-option label="实物商品" value="实物商品" />
								<el-option label="虚拟商品" value="虚拟商品" />
							</el-select>
						</el-form-item>
						<el-form-item label="品牌等级" label-width="90">
							<el-select v-model="form.logoId" style="width: 200px"  clearable placeholder="请选择">
								<el-option
								  v-for="item in options1"
								  :key="item.logoId"
								  :label="item.logoName"
								  :value="item.logoId"
								  :disabled="item.disabled"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="商品标签" label-width="90">
							<el-select v-model="form.tagId" style="width: 200px"  clearable placeholder="请选择">
								<el-option
								  v-for="item in options2"
								  :key="item.tagId"
								  :label="item.tagName"
								  :value="item.tagId"
								  :disabled="item.disabled"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="销量" label-width="90" style="width: 350px;">
						      <el-col :span="11">
						        <el-input
						          type="number"
						          placeholder="最低销量"
						          style="width: 100%"
								  v-model="form.goodsCheating1"
						        />
						      </el-col>
						      <el-col :span="2" class="text-center" style="display: flex;justify-content: center;">
						        <span class="text-gray-500">-</span>
						      </el-col>
						      <el-col :span="11">
						        <el-input
						          placeholder="最高销量"
						          style="width: 100%"
								  v-model="form.goodsCheating2"
						        />
								
						      </el-col>
						</el-form-item>
						<el-form-item label="价格" label-width="90" style="width: 350px;">
						      <el-col :span="11">
						        <el-input
						          type="number"
						          placeholder="最低价格"
						          style="width: 100%"
								  v-model="form.priceValue1"
						        />
						      </el-col>
						      <el-col :span="2" class="text-center" style="display: flex;justify-content: center;">
						        <span class="text-gray-500">-</span>
						      </el-col>
						      <el-col :span="11">
						        <el-input
						          placeholder="最高价格"
						          style="width: 100%"
								  v-model="form.priceValue2"
						        />
						      </el-col>
						</el-form-item>
						<el-button type="primary" style="margin-left: 15px;" @click="search">搜索</el-button>
						<el-button plain @click="reset">重置</el-button>
					</div>
				</div>
				<div>
					<el-menu  ellipsis
					    :default-active="activeIndex"
					    class="el-menu-demo"
					    mode="horizontal"
						style="margin-bottom: 10px;"
					  >
					    <el-menu-item index="1" @click="changeIndex('销售中')">销售中</el-menu-item>
					    <el-menu-item index="2" @click="changeIndex('仓库中')">仓库中</el-menu-item>
						<el-menu-item index="3" @click="changeIndex('')">全部商品</el-menu-item>
					</el-menu>
					<div>
						<el-checkbox style="margin:0 15px;"></el-checkbox><el-button @click="handleDown">批量下架</el-button><el-button @click="handlerMuchRec" >批量删除</el-button>
					</div>
					<el-table style="width: 100%" height="35vh" :data="tableData" @selection-change="handleSelectionChange" ref="multipleTableRef">
						<el-table-column type="selection" width="55"></el-table-column>
					    <el-table-column prop="goodsId" sortable label="Id" width="70"/>
					    <el-table-column label="商品" width="150">
							<template #default = "image">
								<div class="goodsDetail">
									<img :src="downloadUrl+image.row.goodsImage" style=" width:50px;height: 50px;object-fit: cover;">
									<div>
										<p>{{image.row.goodsName}}</p>
										<p style="color: #4b5db9;">{{image.row.goodsVirtual}}</p>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="priceValue" sortable label="价格"/>
						<el-table-column prop="priceNum" sortable label="库存"/>
						<el-table-column prop="goodsSend" sortable label="销量"/>
						<el-table-column prop="goodsState" label="状态"/>
						<el-table-column prop="createTime" sortable label="创建时间"/>
						<el-table-column  label="操作">
							<template #default="record">
								<a class="mya" @click="updateGoodsFn(record.row)" style="margin: 0 2px;">编辑</a>
								<a class="mya" @click="downGoodsFn(record.row)" style="margin: 0 2px;">下架</a>
								<a class="mya" @click="copy(record.row)" style="margin: 0 2px;">复制</a>
								<a class="mya" @click="deleteGoodsFn(record.row)" style="margin: 0 2px;">删除</a>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						layout="prev,pager,next"
						:page-count="total"
						:page-size="pageSize"
						v-model:current-page="pageIndex"	
						@current-change="changePage"
					></el-pagination>
				</div>
				</div>
				<AddGoods @update-message="handleMessageUpdate" :aIndex="activeIndex" :myOptions="options" v-if="flag==2" :myOptions1="options1" :myOptions2="options2"></AddGoods>
			</el-main>
			
			<!-- <GetCoupon v-if="flag==3"></GetCoupon> -->
		</el-container>
	</div>
	
	<!-- 批量删除确认框 -->
	 <el-dialog
	    v-model="dialogVisible1"
	    title="提示"
	    width="500"
	  >
	    <span>确定要删除这些商品吗</span>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="dialogVisible1 = false">取消</el-button>
	        <el-button type="primary" @click="define">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  
	  <!-- 删除单个框 -->
	   <el-dialog
	      v-model="dialogVisible2"
	      title="提示"
	      width="500"
	    >
	      <span>确定要删除该商品吗</span>
	      <template #footer>
	        <div class="dialog-footer">
	          <el-button @click="dialogVisible2 = false">取消</el-button>
	          <el-button type="primary" @click="define">
	            确定
	          </el-button>
	        </div>
	      </template>
	    </el-dialog>
		
		<!-- 下架单个框 -->
		 <el-dialog
		    v-model="dialogVisible3"
		    title="提示"
		    width="500"
		  >
		    <span>确定要下架该商品吗</span>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible3 = false">取消</el-button>
		        <el-button type="primary" @click="defineDown">
		          确定
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
		  <!-- 下架多个框 -->
		   <el-dialog
		      v-model="dialogVisible4"
		      title="提示"
		      width="500"
		    >
		      <span>确定要下架这些商品吗</span>
		      <template #footer>
		        <div class="dialog-footer">
		          <el-button @click="dialogVisible4 = false">取消</el-button>
		          <el-button type="primary" @click="defineDown">
		            确定
		          </el-button>
		        </div>
		      </template>
		    </el-dialog>
</template>

<script setup>
	import AddGoods from './AddGoods.vue';
	// import GetCoupon from './GetCoupon.vue';
	import Header from "@/components/Header.vue"
	import { onMounted, ref, reactive} from 'vue';
	import {GoodsList,DeleteGoods,UpdateGoods,DownGoods,InsertGoods} from "@/api"
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from '../stores/counter';
	import { uploadUrl,baseUrl,downloadUrl } from "@/utils/request";
	import { ElMessage, ElMessageBox } from 'element-plus'
	// 返回
	function handleMessageUpdate (msg) {
		flag.value = 1;
		activeIndex.value=msg
		// console.log("tab切换",activeIndex.value)
		goodsList()
	}
	
	let flag=ref(1)
	let route=useRoute();
	let router=useRouter();
	let counter=useCounterStore();
	counter.btns=route.meta.btns
	
	let multipleTableRef = ref()
	let multipleSelection = ref([])
	let dialogVisible1 = ref(false)
	let dialogVisible2 = ref(false)
	let dialogVisible3 = ref(false)
	let dialogVisible4 = ref(false)
	let arr=[]
	let downArr=[]
	let handleSelectionChange = (val) => {
	  multipleSelection.value = val
	  // console.log("val",val)
	}

	//删除商品
	const deleteGoodsFn = (row)=>{
		// console.log("恢复1",row.goodsId)
		dialogVisible2.value = true
		let obj={
				goodsId:row.goodsId
			}
		arr.push(obj)
		// console.log("删除",arr)
	}
	//批量删除
	const handlerMuchRec = ()=>{
		multipleSelection.value.forEach(row=>{
			let obj={
				goodsId:row.goodsId
			}
			arr.push(obj)
			
		})
		// console.log("批量删除",arr)
		dialogVisible1.value=true
	}
	//点击批量删除中的确定
	const define =async ()=>{
		let res = await DeleteGoods(arr)
		dialogVisible1.value = false;
		dialogVisible2.value = false
		// console.log("res",res)
		ElMessage({
		    message:res,
		    type: 'success',
		})
		goodsList()
	}
	
	// 下架
	const downGoodsFn=(cont)=>{
		dialogVisible3.value = true
		let obj={
				goodsId:cont.goodsId
			}
		downArr.push(obj)
		// console.log("下架",downArr)
		// let res = await DownGoods({
		// 	goodsId:cont.goodsId
		// })
		// console.log("下架",cont.goodsId,res)
	}
	
	//批量下架
	const handleDown = ()=>{
		multipleSelection.value.forEach(row=>{
			let obj={
				goodsId:row.goodsId
			}
			downArr.push(obj)
			// console.log("obj",obj)
		})
		// console.log("批量下架",downArr)
		dialogVisible4.value=true
	}
	
	//点击下架中的确定
	const defineDown =async ()=>{
		let res = await DownGoods(downArr)
		dialogVisible3.value = false;
		dialogVisible4.value = false
		// console.log("res",res)
		ElMessage({
		    message:res,
		    type: 'success',
		})
		goodsList()
	}
	
	
	// 添加商品
	const addGoodsFn=()=>{
		sessionStorage.removeItem("itemGoods")
		flag.value=2
	}

	//修改商品
	const updateGoodsFn=(item)=>{
		// console.log(item)
		sessionStorage.setItem("itemGoods",JSON.stringify(item))
		// router.push("/setting/AddMenu")
		flag.value=2
	}


	const activeIndex = ref('1')

	// //获取商品列表
	let tableData = ref([])
	let goodstype = ref([])
	let pageIndex=ref(1);
	let pageSize=4;
	let total=ref(0);
	let dataArr=[]
	let goodsstate=ref("销售中")
	let form = reactive({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:1,
		priceCode:"",
		goodsName:"",
		separateId:"",
		goodsVirtual:"",
		logoId:"",
		tagId:"",
		priceValue1:"",
		priceValue2:"",
		goodsCheating1:"",
		goodsCheating2:"",		
	})
	let options = ref([])
	let options1 = ref([])
	let options2 = ref([])
	
	// 商品列表
	let frist = []
	let second= []
	const goodsList=async ()=>{
		let res=await GoodsList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			goodsState:goodsstate.value,
			siteId:1
		})
		// console.log("商品列表",res.separate)
		frist=[]
		res.separate.forEach(v=>{
			v.z=[]
			if(v.separateSuperior=="0" ){
				frist.push(v)
			}
		})
		frist.forEach((v,index)=>{
			res.separate.forEach((v2,index)=>{
				if(v2.separateSuperior && v.separateId){
					if(Number(v2.separateSuperior)  == Number(v.separateId) ){
						v.z.push(v2)
						// console.log("v2",v2)
					}
				}
			})
			
		})
		// console.log("first.....",frist)
		let setData=ref([])
		for(var i=0;i<frist.length;i++){
			var firstObj = {
				value:frist[i].separateId,
				label:frist[i].separateName,
				children:[]
			}
			if(frist[i].z.length != 0){
				for(var j=0;j<frist[i].z.length;j++){
					var secondObj = {
						value:frist[i].z[j].separateId,
						label:frist[i].z[j].separateName,
					}
					firstObj.children.push(secondObj)
				}
			}
			setData.value.push(firstObj)
		}
		// console.log("商品分类下拉11111",setData.value)
		options.value=setData.value
		
		
		res.goodsList.forEach(item=>{
			if(item.specification.length != 0){
				item.priceValue=item.specification[0].priceValue
				item.priceNum=item.specification[0].priceNum
			}
		})
		tableData.value=res.goodsList
		
		options1.value=res.logo
		options2.value=res.tag
		// console.log("商品类别：",goodstype)
		total.value=res.pageCount
	}
	
	//搜索
	const search =async ()=>{
		let data={}
		for(var i in form){
			if(form[i]){
				data[i]= form[i]
			}
		}
		let search = await GoodsList(data)
		tableData.value=search.goodsList
		activeIndex.value=3
		total.value=search.pageCount
		// console.log("search",data,search)
	}
	
	// tab切换
	const changeIndex=(clickIndex)=>{
		// console.log("切换",clickIndex)
		goodsstate.value=clickIndex
		// search()
		goodsList()

	}
	
	//复制
	const copy=(content)=>{
		// console.log(content)
		navigator.clipboard.writeText(content.goodsName)
		ElMessage.success("复制成功")
	}
	
	// 重置
	const reset=()=>{
		form.priceCode=""
		form.goodsName="",
		form.separateId="",
		form.goodsVirtual="",
		form.logoId="",
		form.tagId="",
		form.priceValue1="",
		form.priceValue2="",
		form.goodsCheating1="",
		form.goodsCheating2="",
		goodsList()
		activeIndex.value=1
	}
	
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		goodsList()
	}
	
	onMounted(()=>{
		goodsList()
	})
</script>

<style  scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			
		}
		.mya{
			color: #4b5db9;
			margin:0 4px;
			cursor: pointer;
		}
		
		.item1{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
		}
		.el-form-item__content{
			width: 200px;
		}
		.el-menu-item {
			padding: 0 10px !important; /* 设置左右padding为20px */
		}
		.el-menu-item.is-active{
			background-color: #fff;
		}
		:deep(.el-table .cell .goodsDetail){
			display: flex !important;
		}
	}
	
</style>
